<script>
import { layoutMethods } from "@/state/helpers";
import { menuItems } from "./horizontal-menu";

export default {
  data() {
    return {
      menuItems: menuItems
    };
  },
  mounted() {
    var links = document.getElementsByClassName("side-nav-link-ref");
    var matchingMenuItem = null;
    for (var i = 0; i < links.length; i++) {
      if (window.location.hash === links[i].hash) {
        // console.log(links[i])
        // console.log("锚点",window.location.hash )
        // console.log(window.location.hash )
        // console.log(window.location.hash )
        matchingMenuItem = links[i];
        // console.log(matchingMenuItem)
        break;
      }
      if(window.location.hash.indexOf(links[i].hash)>-1){
        matchingMenuItem = links[i];
        break;
      }
    }



    if (matchingMenuItem) {
      // console.log("值",matchingMenuItem)
      matchingMenuItem.classList.add("active");
      var parent = matchingMenuItem.parentElement;

      /**
       * TODO: This is hard coded way of expading/activating parent menu dropdown and working till level 3.
       * We should come up with non hard coded approach
       */
      if (parent) {
        parent.classList.add("active");
        const parent2 = parent.parentElement;
        if (parent2) {
          parent2.classList.add("active");
        }
        const parent3 = parent2.parentElement;
        if (parent3) {
          parent3.classList.add("active");
          var childAnchor = parent3.querySelector(".has-dropdown");
          if (childAnchor) childAnchor.classList.add("active");
        }

        const parent4 = parent3.parentElement;
        if (parent4) parent4.classList.add("active");
        const parent5 = parent4.parentElement;
        if (parent5) parent5.classList.add("active");
      }
    }
  },
  methods: {
    ...layoutMethods,

    /**
     * Menu clicked show the submenu
     */
    onMenuClick(event) {
      event.preventDefault();
      const nextEl = event.target.nextSibling;
      if (nextEl && !nextEl.classList.contains("show")) {
        const parentEl = event.target.parentNode;
        if (parentEl) {
          parentEl.classList.remove("show");
        }
        nextEl.classList.add("show");
      } else if (nextEl) {
        nextEl.classList.remove("show");
      }
      return false;
    },
    /**
     * Returns true or false if given menu item has child or not
     * @param item menuItem
     */
    hasItems(item) {
      return item.subItems !== undefined ? item.subItems.length > 0 : false;
    },
    change_layout(layout) {
      console.log(layout);
      // return this.changeLayoutType({ layoutType: layout });
      this.$router.push('/dashboard')
    },
  }
};
</script>

<template>
  <div class="topnav">
    <div class="container-fluid">
      <nav class="navbar navbar-light navbar-expand-lg topnav-menu">
        <div class="collapse navbar-collapse" id="topnav-menu-content">
          <ul class="navbar-nav">
            <li class="nav-item dropdown" v-for="(item, index) of menuItems" :key="index">
              <router-link
                tag="a"
                v-if="!item.subItems"
                :to="item.link"
                class="nav-link dropdown-toggle arrow-none side-nav-link-ref"
              >
                <div style="display:flex;">
                  <i :class="`${item.icon} mr-2`" style="margin-right: 0.3rem !important;font-size: 18px;"></i>
                  <div class="text">{{item.label}}</div>
                </div>
              </router-link>
            </li>
            <!-- <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle arrow-none"
                id="topnav-layout"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                @click="onMenuClick"
              >
                <i class="el-icon-monitor mr-2" style="margin-right: 0.3rem !important;"></i>
                资源管理
                <div class="arrow-down"></div>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="topnav-layout">
                <a @click="change_layout('vertical')" class="dropdown-item">客户管理</a>
                <a @click="change_layout()" class="dropdown-item">计算资源</a>
                <a @click="change_layout()" class="dropdown-item">接口管理</a>
                <a @click="change_layout()" class="dropdown-item">用户管理</a>
              </div>
            </li> -->
          </ul>
        </div>
      </nav>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.topnav .navbar-nav .nav-link{
  padding: 0 1.3rem;
  i{
    padding: 1.1rem 0;
  }
  .text{
    padding: 1rem 0;
  }
}
.topnav .navbar-nav .nav-link.active{
  font-weight: 600;
  .text{
    border-bottom: 2px solid;
    padding: 1rem 0 .88rem 0;
  }
}
</style>
